<template>
  <div class="container-Home">
    <!-- 第一行   -->
    <Row>
      <!-- 左边      -->
      <Col span="12">
        <ul>
          <li style="list-style-type:none">
            <span class="title">{{$t('upload_statistics')}}</span>
          </li>
          <li style="list-style-type:none">
            <template v-for="item in tags">
              <Tag checkable ref="item.ref" name="item.name" style="cursor: pointer" color="primary" size="large" :checked="item.checked"
                   @on-change="tagsChange(item)">
                  {{ item.desc }}</Tag>
            </template>
<!--            <Tag checkable ref="yesterday" name="yesterday" style="cursor: pointer" color="primary" size="large" :checked="tagChecked.chkYesterday" @on-change="yesterdayChange">{{$t('yesterday')}}</Tag>
            <Tag checkable ref="today" name="today" style="cursor: pointer" color="primary" size="large" :checked="tagChecked.chkToday" @on-change="todayChange">{{$t('today')}}</Tag>
            <Tag checkable ref="thisMonth" name="thisMonth" style="cursor: pointer" color="primary" size="large" :checked="tagChecked.chkThisMonth" @on-change="thisMonthChange">{{$t('this_month')}}</Tag>
            <Tag checkable ref="lastMonth" name="lastMonth" style="cursor: pointer" color="primary" size="large" :checked="tagChecked.chkLastMonth" @on-change="lastMonthChange">{{$t('last_month')}}</Tag>
            <Tag checkable ref="thisYear" name="thisYear" style="cursor: pointer" color="primary" size="large" :checked="tagChecked.chkThisYear" @on-change="thisYearChange">{{$t('this_year')}}</Tag>
            <Tag checkable ref="allYear" name="allYear" style="cursor: pointer" color="primary" size="large" :checked="tagChecked.chkAllYear" @on-change="allYearChange">{{$t('total')}}</Tag>
          </li>-->
          <li style="list-style-type:none"></li>
        </ul>
      </Col>
      <!-- 右边     -->
      <Col span="12">
        <ul>
          <li></li>
          <li style="list-style-type:none">
            <span class="title">{{$t('device_reg_stastics')}}</span>
          </li>
        </ul>
      </Col>
    </row>
    <!-- 第二行   -->
    <Row class="panel-count-number" :gutter="2">
      <Col span="4">
        <div class="item" style="background: rgb(237,241,245);">
          <div class="title" >{{$t('number_of_upload_files')}}</div>
          <div class="count-number">
            {{this.fileTotal.count}}
          </div>
        </div>
      </Col>
      <Col span="4">
<!--        <div class="item" style="background: rgb(25, 190, 107);">-->
        <div class="item" style="background: rgb(237,241,245);">
          <div class="title" >{{$t('upload_file_size')}}</div>
          <div class="count-number">
            {{this.fileTotal.size}}
          </div>
        </div>
      </Col>
      <Col span="4">
<!--        <div class="item" style="background: rgb(228, 108, 187);">-->
        <div class="item" style="background: rgb(237,241,245);">
          <div class="title" >{{$t('recording_duration')}}</div>
          <div class="count-number">
            {{this.fileTotal.duration}}
          </div>
        </div>
      </Col>
      <Col span="4">
<!--        <div class="item" style="background: rgb(45, 140, 240);">-->
        <div class="item" style="background: rgb(237,241,245);">
          <div class="title" >{{$t('total_number_of_4G_cameras')}}</div>
          <div class="count-number">
            {{this.deviceTotal.mobile}}
            <!--            <count-to :end="this.logTotal"/>-->
          </div>
        </div>
      </Col>
      <Col span="4">
<!--        <div class="item" style="background: rgb(25, 190, 107);">-->
        <div class="item" style="background: rgb(237,241,245);">
          <div class="title">{{$t('number_of_stand_alone_cameras')}}</div>
          <div class="count-number">
            {{this.deviceTotal.common}}
            <!--            <count-to :end="this.logDayRequest"/>-->
          </div>
        </div>
      </Col>
      <Col span="4">
<!--        <div class="item" style="background: rgb(228, 108, 187);">-->
        <div class="item" style="background: rgb(237,241,245);">
          <div class="title">{{$t('total_number_cameras')}}</div>
          <div class="count-number">
            {{this.deviceTotal.camera}}
            <!--            <count-to :end="this.logDayDataRequest"/>-->
          </div>
        </div>
      </Col>

    </Row>

    <Row class="panel-table-list" :gutter="12">
      <Col span="12">
        <span class="title">{{$t('latest_upload_files')}}</span>
        <Table border :stripe="docStripe" :columns="docColumns" :data="docTableData">
        </Table>
<!--        <tables class="table" :loading="loading1" stripe ref="tables" v-model="tableDataReturnCode" :columns="columns"/>-->
      </Col>
      <Col span="12">
        <span class="title">{{$t('latest_related_business')}}</span>
        <Table border stripe :columns="alarmColumns" :data="alarmTableData"/>
      </Col>
    </Row>

<!--    <Row><Col span="12">
      <div style="width: 100%;height: 32px">
      <input type="range" min="0" max="100" step="1" value="50" style="width: 100%;height: 100%"/>
      </div></Col> </Row> -->
  </div>
</template>

<script>
import InforCard from '_c/info-card'
import CountTo from '_c/count-to'
import { countDevices, countDocument, searchDocument, searchAlarm } from '@/api/home'
import NumberGrow from '@/components/number-grow/NumberGrow'
import Tables from '_c/tables'
import {apiResult} from "@/libs/util";
/*import { Tag } from 'view-design/src/components/tag'*/

export default {
  name: 'Home',
  components: {NumberGrow,InforCard,CountTo,Tables},
  computed:{
  },
  data () {
    return {
      docStripe:true,
      deviceTotal:{
        mobile:0,
        common:0,
        camera:0
      },
      fileTotal:{
        count:0,
        size:0,
        duration:0,
      },
      tagChecked:{
        chkYesterday:false,
        chkToday:false,
        chkThisMonth:false,
        chkLastMonth:false,
        chkThisYear:false,
        chkAllYear:true,
      },
      docTableData:[],
      docColumns:[
        {title: this.$t('personnel'), key: 'userName', sortable: true,width: 150},
        {title: this.$t('upload_time'), key: 'uploadTime',width: 175},
        {title: this.$t('file_name'), key: 'docName', resizable: true,sortable: true,tooltip:true,tooltipTheme:'light'},
      ],
      alarmTableData:[],
      alarmColumns:[
        {title: this.$t('business_code'), key: 'alarmCode', sortable: true,width: 200,ellipsis:true,tooltip:true,tooltipTheme:'light'},
        {title: this.$t('time'), key: 'alarmTime',width: 175},
        {title: this.$t('bus_content'), key: 'alarmContent', resizable: true,sortable: true,ellipsis:true,tooltip:true,tooltipTheme:'light'},
      ],

      logTotal: 0,
      logDayRequest: 0,
      logDayDataRequest: 0,
      logDaySite: 0,
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + (this.page - 1) * this.pageSize + 1)
          }
        },
        { title: this.$t('device_type'), key: 'deviceType', sortable: false },
        { title: 'IP', key: 'ip', sortable: false },
        { title: this.$t('error_code'), key: 'returnCode', sortable: false },
        { title: this.$t('error_timers'), key: 'totalCount', sortable: false }
      ],
      tableDataReturnCode: [],
      tableDataBlacklist: [],
      loading1: true,
      loading2: true,
      tags:[
        {ref:'yesterday',name:'yesterday',checked:false,desc:this.$t('yesterday'),countType:2},
        {ref:'today',name:'today',checked:false,desc:this.$t('today'),countType:1},
        {ref:'thisMonth',name:'thisMonth',checked:false,desc:this.$t('this_month'),countType:3},
        {ref:'lastMonth',name:'lastMonth',checked:false,desc:this.$t('last_month'),countType:4},
        {ref:'this_year',name:'this_year',checked:false,desc:this.$t('this_year'),countType:5},
        {ref:'allYear',name:'allYear',checked:false,desc:this.$t('total'),countType:6},
      ]
    }
  },
  methods: {
    tagsChange(item){
      this.tags.forEach(tag=>{
        if (tag.name === item.name){
          tag.checked = true;
        }else{
          tag.checked = false;
        }
      })
      this.countDocument(item.countType);

/*      this.tagChecked.chkToday = false;
      this.tagChecked.chkYesterday = true;
      this.tagChecked.chkThisMonth = false;
      this.tagChecked.chkLastMonth =false;
      this.tagChecked.chkThisYear =false;
      this.tagChecked.chkAllYear = false;
      this.countDocument(2);*/
    },
    /*todayChange(checked, name){
      this.tagChecked.chkToday = true;
      this.tagChecked.chkYesterday = false;
      this.tagChecked.chkThisMonth = false;
      this.tagChecked.chkLastMonth =false;
      this.tagChecked.chkThisYear =false;
      this.tagChecked.chkAllYear = false;
      this.countDocument(1);
    },
    thisMonthChange(checked, name){
      this.tagChecked.chkToday = false;
      this.tagChecked.chkYesterday = false;
      this.tagChecked.chkThisMonth = true;
      this.tagChecked.chkLastMonth =false;
      this.tagChecked.chkThisYear =false;
      this.tagChecked.chkAllYear = false;
      this.countDocument(3);
    },
    lastMonthChange(checked, name){
      this.tagChecked.chkToday = false;
      this.tagChecked.chkYesterday = false;
      this.tagChecked.chkThisMonth = false;
      this.tagChecked.chkLastMonth =true;
      this.tagChecked.chkThisYear =false;
      this.tagChecked.chkAllYear = false;
      this.countDocument(4);
    },
    thisYearChange(checked, name){
      this.tagChecked.chkToday = false;
      this.tagChecked.chkYesterday = false;
      this.tagChecked.chkThisMonth = false;
      this.tagChecked.chkLastMonth =false;
      this.tagChecked.chkThisYear =true;
      this.tagChecked.chkAllYear = false;
      this.countDocument(5);
    },
    allYearChange(checked, name){
      this.tagChecked.chkToday = false;
      this.tagChecked.chkYesterday = false;
      this.tagChecked.chkThisMonth = false;
      this.tagChecked.chkLastMonth =false;
      this.tagChecked.chkThisYear =false;
      this.tagChecked.chkAllYear = true;
      this.countDocument(6);
    },*/
    /** 文件统计 */
    countDocument(type){
      countDocument(type).then(res=>{
          apiResult(res.data,false,result=>{
            this.fileTotal.count = result.data.fileCount;
            this.fileTotal.size = result.data.fileSizeStr;
            this.fileTotal.duration = result.data.durationStr;
          })
      })
    },
    // 注册设备统计
    countDevices() {
      //console.log("countDevices()");
      this.logTotal = 0;
      this.logDayRequest = 0;
      this.logDayDataRequest = 0;
      this.logDaySite = 0;
      countDevices().then(res=>{
          apiResult(res.data,false,result=>{
            this.deviceTotal.common = result.data.common;
            this.deviceTotal.mobile = result.data.mobile;
            this.deviceTotal.camera = result.data.camera;
          })
      })
     },
    searchDocument(){
      searchDocument().then(res => {
        this.docTableData = null;
          apiResult(res.data,false,result=>{
            this.docTableData = result.data.records;
          })
      })
    },
    searchAlarm(){
      searchAlarm().then(res => {
        this.alarmTableData = null;
          apiResult(res.data,false,result=>{
            this.alarmTableData = result.data.records;
          })
      })
    },
    returnCodeList () {
      this.loading1 = false;
    },
    blacklist () {
      this.loading2 = false;
    },
    // 统计
    count2 () {}
  },
  mounted () {
    this.countDevices();
    this.countDocument(6);
    this.searchDocument();
    this.searchAlarm();


/*    this.count2();
    this.returnCodeList();
    this.blacklist();*/
  }
}
</script>

<style lang="less">
@import "home-little";

.panel-statistics{
  width: 100%;
  display: flex;
  //flex-wrap: wrap;
  border-color: #c80000;
  background-color: rgba(132, 232, 215, 0.97);
  word-wrap: break-word;
}
</style>
